// 头部皮肤
// 暂时只实现浅色

.e-header {
    background-color: e-get($e-header-skins-config, light, background-color);
    box-shadow: 0 0 40px 0 rgba(82, 63, 105, .1);

    .e-header-topbar {
        .e-header-topbar-item {
            .e-header-topbar-icon {
                i {
                    @include e-transition();
                    color: e-brand-color()
                }
            }
            // 用户信息
            &.e-header-topbar-item--user {
                .e-header-topbar-user {
                    .e-header-topbar-welcome {
                        @include e-transition();
                        color: #959cb6;
                    }

                    .e-header-topbar-username {
                        @include e-transition();
                        color: #6c7293;
                    }
                }
            }

            &:hover, &.show {
                .e-header-topbar-icon {
                    @include e-transition();
                    background-color: e-get($e-header-skins-config, light, topbar, hover-background-color);

                    i {
                        @include e-transition();
                        color: e-brand-color()
                    }
                }

                &.e-header-topbar-item--user {
                    .e-header-topbar-user{
                        @include e-transition();
                        background-color: e-get($e-header-skins-config, light, topbar, hover-background-color);
                    }
                }
            }
        }
    }

    .e-header-menu {
        .e-menu-nav {
            > .e-menu-item {
                > .e-menu-link {

                    background-color: e-get($e-header-skins-config, light, menu, item, link, self, background-color, default);

                    .e-menu-link-icon {
                        color:  e-get($e-header-skins-config, light, menu, item, link, text, font-color, active);

                        svg {
                            @include e-svg-icon-color(e-get($e-header-skins-config, light, menu, item, link, text, font-color, active));
                        }
                    }
                    .e-menu-link-text {
                        color: e-get($e-header-skins-config, light, menu, item, link, text, font-color, default);
                    }
                }


                &:hover, &.active {
                    > .e-menu-link {
                        background-color: e-get($e-header-skins-config, light, menu, item, link, self, background-color, hover);

                        .e-menu-link-text {
                            color: e-get($e-header-skins-config, light, menu, item, link, text, font-color, active);
                        }
                    }
                }
            }
        }
    }
}
// pad & 手机
@include e-tablet-and-mobile{
    .e-header-topbar {
        background-color: #fff;
        box-shadow: none;
    }

    .e-header-topbar--mobile-on {
        .e-header-topbar {
            z-index: 1;
            box-shadow: 0 0 40px 0 rgba(82,63,105,.1);
            border-top: 1px solid e-base-color(grey, 2);
        }
    }
}